<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_固定定位广告条</title>
    <style>
        .top{
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px ;
            /*使用固定定位 让广告条紧贴html顶部*/
            position: fixed;
            top: 0;
            /*设置宽度为视口(viewport width)宽度的100%*/
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus ad aliquam aliquid asperiores
            assumenda dolores ea incidunt, inventore libero molestias nulla porro, voluptas! In inventore maiores quia
            sunt voluptatibus.
        </div>
        <div>Adipisci aspernatur, atque consequatur debitis doloremque dolorum non pariatur rem. Aspernatur beatae
            blanditiis cupiditate, dignissimos distinctio doloremque dolorum itaque laborum magni maxime odit
            perferendis possimus quam quibusdam quidem sunt voluptates!
        </div>
        <div>Culpa dicta dolorum ducimus, earum eum expedita, inventore magnam magni omnis perferendis provident quas
            quis quisquam quo ratione tempore tenetur. Aliquid corporis cum eaque ex explicabo natus officiis,
            repellendus. Voluptatum?
        </div>
        <div>Ad assumenda beatae consectetur corporis cupiditate ea eaque, et excepturi facilis iure laudantium
            molestias nisi nulla temporibus ullam veritatis, vitae! Ad assumenda delectus et in quidem. Est eveniet
            fugit itaque!
        </div>
        <div>Ad aperiam dicta ea facere illum in molestiae nobis numquam reprehenderit tempore. A ad aliquid asperiores
            at, deleniti error excepturi id illo laboriosam nesciunt officia, provident quae quam quis voluptas!
        </div>
        <div>Animi culpa, cupiditate dicta eius est fugit itaque maiores natus nesciunt nobis possimus quas quidem sunt
            tempora totam unde veritatis. Alias aspernatur beatae corporis et itaque, quos soluta temporibus totam!
        </div>
        <div>Autem, cumque laborum! Commodi cum eius enim excepturi, maxime molestias numquam, officiis provident quidem
            quisquam similique ullam veritatis voluptatibus. Aliquid dolor error et inventore nemo quibusdam quos
            repellat vero vitae?
        </div>
        <div>Aspernatur doloribus sapiente sequi voluptatibus! Asperiores blanditiis, consequatur doloribus earum enim
            est excepturi, expedita incidunt itaque labore nemo officiis optio quae reiciendis repellat reprehenderit
            sapiente, similique totam velit veniam veritatis!
        </div>
        <div>A accusamus, ad aliquam dolor esse ex illo impedit ipsam iusto libero magni minima natus nemo praesentium
            provident quia recusandae rem repellat sunt veniam. Assumenda cum nisi repellat reprehenderit sed.
        </div>
        <div>Asperiores autem dolorem error esse illum iste nostrum perspiciatis porro, quaerat quasi, quisquam
            repellat, rerum sed soluta tempora veniam veritatis voluptatum. Autem dolorem doloremque itaque maxime natus
            quae ratione. Itaque.
        </div>
        <div>Accusantium amet animi asperiores atque corporis dignissimos distinctio, dolores, exercitationem iure
            labore minus neque nesciunt perferendis placeat quaerat quam quasi quos repellendus rerum sed similique
            tempora tempore temporibus tenetur vitae?
        </div>
        <div>A adipisci aut commodi, ex ipsum nemo quos sed! Aliquam atque debitis fugit quo voluptates! Ab aliquid
            blanditiis cum, cumque esse in molestiae odio officiis quae reiciendis repellendus unde vitae?
        </div>
        <div>Eligendi incidunt quia rem repellendus tempora. Accusantium ad at consequatur dolore ea earum eligendi hic,
            itaque laborum maxime nisi non odio porro qui quia sequi, similique, sit vel vitae voluptatum.
        </div>
        <div>Commodi debitis excepturi libero nihil nulla totam vel vitae! Aut blanditiis debitis deleniti doloribus
            dolorum ea ipsam, iure iusto labore nam, porro quo rem, sit tenetur voluptate voluptatem voluptates! Id.
        </div>
        <div>Aliquid error ipsum perferendis. Animi asperiores atque corporis cumque distinctio dolores earum error
            eveniet explicabo facere fugiat hic impedit libero minima non odio quam saepe, temporibus velit vero vitae
            voluptatibus.
        </div>
        <div>Ab aliquid, delectus deserunt dicta dolorem dolorum, earum error expedita fugiat id laudantium libero
            maiores nam natus non officia omnis optio porro possimus provident qui quidem quod rem ullam voluptatum?
        </div>
        <div>Aut, id non placeat recusandae soluta sunt tenetur. Aliquam debitis omnis optio quasi ullam. Consequuntur
            ducimus et eveniet praesentium qui repudiandae sapiente tempore. Blanditiis eaque explicabo quibusdam sed?
            Harum, ipsam.
        </div>
        <div>Atque consequatur doloribus eaque, eligendi excepturi explicabo illum laboriosam magnam minus odit rem,
            voluptatibus! Architecto asperiores at explicabo in ipsum labore magnam magni optio placeat, quae rerum
            temporibus, veritatis voluptatibus.
        </div>
        <div>Alias blanditiis ducimus excepturi harum quaerat quis quisquam, recusandae saepe. Accusantium, aliquid,
            asperiores blanditiis dolorem ducimus, eos ipsam necessitatibus numquam porro sint sunt tenetur. Deleniti
            impedit iure molestiae reprehenderit suscipit.
        </div>
        <div>Consequatur, cumque enim exercitationem reiciendis rerum sapiente tenetur. Adipisci alias assumenda dolor
            dolore eos facere fuga illum in iure neque odio officiis, optio, qui quibusdam quis reiciendis rerum
            suscipit voluptatibus.
        </div>
        <div>Adipisci aliquid blanditiis dolor doloribus ea, fugiat quas quasi, qui quod rem sed totam veritatis
            voluptate! Asperiores, cupiditate debitis deserunt facere facilis fugit iste laborum maiores quisquam quo
            quos ullam?
        </div>
        <div>Ad at exercitationem natus nihil quod voluptatum? Alias aperiam architecto asperiores, consectetur
            consequuntur error esse et illo illum ipsum laudantium maxime minus neque nihil nulla officia quaerat
            suscipit voluptates. Distinctio.
        </div>
        <div>Alias aliquid animi beatae cupiditate dolor ea error et eum ex explicabo harum laboriosam maxime nam
            nesciunt nulla provident quas, soluta veritatis vero vitae. A nam praesentium repellat sequi tempore.
        </div>
        <div>Aliquid aut blanditiis consequuntur enim facere maiores modi, perspiciatis quas sit ullam. Ab adipisci
            architecto aut corporis culpa dolorum eaque, ex expedita, hic iusto maiores minima nisi possimus rem
            tempore!
        </div>
        <div>Ab ad aut blanditiis, cupiditate dolor dolore doloremque, dolorum eius error eveniet expedita fugiat
            impedit iusto laboriosam laborum maiores modi molestiae, molestias mollitia nemo perspiciatis porro
            reiciendis sequi sunt vero!
        </div>
        <div>Atque doloremque illo nostrum quidem soluta, veniam voluptatum. Aliquid aperiam eveniet illum nisi optio
            pariatur quam qui quisquam saepe! Ab animi deserunt eveniet ex porro quia quos reprehenderit unde
            voluptatum.
        </div>
        <div>Aliquid aspernatur consequuntur dolore earum exercitationem explicabo facilis fugiat hic itaque iure
            maxime, minima molestiae numquam officiis quaerat quis ratione reprehenderit repudiandae rerum similique
            suscipit ut, veritatis, voluptas. Dolorum, quia.
        </div>
        <div>Beatae, cum delectus et excepturi libero optio possimus rerum unde. Aspernatur cum dolore explicabo minima
            nulla possimus provident soluta vel voluptatem. Autem distinctio ipsum nobis qui soluta. Consequatur,
            cupiditate fugit?
        </div>
        <div>Ad consectetur doloremque doloribus iure modi nihil perferendis placeat quae rem unde. Beatae cum
            dignissimos ipsam ipsum iusto nesciunt optio provident vitae! Asperiores cum et excepturi nesciunt quidem
            quis quod?
        </div>
        <div>Accusamus architecto asperiores dolore illum natus vero. Accusamus aliquid animi consequuntur et illo iure
            maiores modi, molestiae numquam placeat quam quas, qui quis quod, reprehenderit sint veniam vero voluptas.
            Facere!
        </div>
        <div>Ab, adipisci architecto assumenda at aut consequatur debitis dicta doloremque dolores eius eos, est et
            explicabo facilis hic, laudantium magni neque nesciunt non omnis provident qui veniam veritatis voluptatem
            voluptatibus!
        </div>
        <div>Beatae consectetur delectus deleniti error, explicabo harum, impedit iste perspiciatis quos sunt tempore
            voluptas. Commodi culpa debitis dignissimos eaque nisi nulla perferendis provident, quas repellat sequi.
            Illum magnam nulla voluptatem.
        </div>
        <div>Ab alias, aperiam atque autem dolore ducimus ea eaque eos esse eum facere, fugiat hic itaque libero magni
            minima mollitia natus nesciunt numquam officiis quisquam repellat, similique? Ipsa itaque, nobis?
        </div>
        <div>Adipisci alias aliquid aperiam, asperiores dolore dolorem, doloremque dolorum eaque et id in incidunt iure
            libero molestias mollitia, nam numquam officiis quae quaerat quam qui sit ut velit veritatis voluptatibus!
        </div>
        <div>Alias deleniti earum error incidunt nulla, tempore? Dolores ea earum exercitationem facere impedit nobis
            quam sed. Aliquam aliquid at, blanditiis dolore dolorem dolores excepturi placeat porro praesentium quasi
            similique, voluptate?
        </div>
        <div>Alias animi autem cupiditate dolor dolore dolores eos facere in incidunt nulla pariatur, ratione, sapiente
            suscipit ut voluptas? Deserunt id, magni nemo quia repellendus rerum sed sequi sunt suscipit unde.
        </div>
        <div>A delectus eaque est mollitia quaerat qui quisquam similique ut! Amet atque corporis esse necessitatibus
            saepe sit! Debitis dignissimos earum necessitatibus neque nostrum odio quam sequi sit soluta sunt? Id.
        </div>
        <div>Amet, architecto deleniti dolor doloribus enim esse est expedita fuga ipsam itaque laboriosam laborum
            natus, nihil non nulla quae quibusdam repellat reprehenderit suscipit temporibus! Esse expedita minus nihil
            non veniam?
        </div>
        <div>Aliquam aliquid architecto autem beatae corporis, cum eaque error est et expedita in ipsa magnam maxime
            modi, natus nisi obcaecati pariatur placeat qui quod tempore tenetur unde, velit vitae voluptates.
        </div>
        <div>Assumenda blanditiis, culpa deserunt doloribus eaque eveniet harum, impedit labore laborum molestiae, odit
            perferendis quibusdam rem sed tempora temporibus vel veritatis voluptas. Eaque eligendi exercitationem nihil
            nobis quia unde voluptas.
        </div>
        <div>Accusamus adipisci amet aut commodi consectetur dolorem doloribus dolorum ducimus eligendi facere facilis,
            ipsa iusto minima mollitia, natus obcaecati omnis possimus quae quibusdam ratione reiciendis sunt vel velit
            vero voluptatem.
        </div>
        <div>Cum, ducimus, iure! Accusantium commodi dicta illum incidunt maxime nesciunt nobis quasi rerum totam vel?
            Aut eum exercitationem in natus ratione! Excepturi fugiat illo natus obcaecati, officiis quidem tempore
            unde.
        </div>
        <div>Aliquam animi cum debitis distinctio dolore doloribus ea earum et eveniet ipsum iure magnam minus modi
            necessitatibus non odit officia placeat quae quas rem reprehenderit sed, ullam veritatis voluptatibus
            voluptatum.
        </div>
        <div>Ab cumque eius eveniet itaque repellat? Alias aliquid consequatur culpa distinctio, eaque eligendi enim
            excepturi fuga magni necessitatibus nisi odit perspiciatis praesentium quas qui, quibusdam, recusandae
            reiciendis sed tempore veniam?
        </div>
        <div>Aspernatur dolore earum id iste, laboriosam nesciunt pariatur provident quibusdam quis, soluta suscipit
            tempora. Ab, at, dicta dolor facere hic libero natus obcaecati omnis possimus quaerat quidem quos rem
            veritatis?
        </div>
        <div>Accusantium beatae enim quam quod ratione. Ad alias, asperiores aut, consequuntur culpa dolorum ducimus
            error eum labore molestias mollitia nam nulla praesentium quis quisquam ratione reprehenderit sit voluptas
            voluptate voluptates.
        </div>
        <div>Animi at blanditiis maiores nemo reprehenderit sequi sit, vitae. Eum exercitationem hic in quas? Error
            facere fugiat libero nobis quas repellat vel velit veniam! Assumenda at cupiditate quibusdam vitae
            voluptate!
        </div>
        <div>Asperiores beatae, dignissimos dolore eius enim eum ipsam ipsum natus nemo officia provident, quo quos
            reiciendis. Deleniti doloribus id nemo quia tenetur? Eaque eius eligendi id officia vel veniam, vero.
        </div>
        <div>Adipisci, at dolorum earum in incidunt ipsa ipsum labore laboriosam maxime natus neque odit omnis quo
            repellendus sit temporibus ullam! Consectetur deserunt dolores fugit ipsa ipsam nobis obcaecati quasi
            veritatis.
        </div>
        <div>Aliquid cum ducimus inventore itaque labore laudantium maxime molestias nihil, optio perferendis provident
            quaerat velit voluptate. Blanditiis, consequatur cum cumque eaque est et eum hic ipsum labore necessitatibus
            nulla vero.
        </div>
        <div>Alias consequuntur eius error magnam quam. Aliquid consequuntur dolorum ducimus eum facere facilis harum id
            magnam modi optio provident quam quod saepe sed sint sit tenetur, unde veritatis voluptas voluptatibus!
        </div>
        <div>Consequatur cupiditate deleniti dignissimos explicabo minima, natus neque nobis quam repellendus sed velit
            voluptas? Ab animi asperiores dolorem et facilis, fugit perferendis placeat, quaerat sapiente sed suscipit
            tempora vero voluptatibus?
        </div>
        <div>Aliquid assumenda consequatur cum eum eveniet odit quia repellendus sapiente, suscipit vitae. Ad aliquam,
            aperiam consequatur, eius iusto molestiae molestias natus omnis quae quam quasi qui repudiandae sequi sint
            voluptatibus?
        </div>
        <div>Amet animi architecto asperiores autem beatae consectetur deserunt dicta ducimus eligendi, esse facere
            fugiat harum laudantium maxime odit officia omnis optio porro provident quam recusandae sapiente sint
            tenetur, voluptate voluptatem.
        </div>
        <div>Ab adipisci commodi corporis cum dicta ducimus expedita facere ipsum mollitia nisi possimus, quod repellat
            vitae voluptas, voluptatum. At atque blanditiis dolores error et, labore nostrum quam sequi totam voluptate.
        </div>
        <div>Ab accusamus asperiores autem commodi dolorem ducimus, eligendi eos error eum facilis id ipsam ipsum
            laborum libero maxime molestiae, nemo neque nesciunt nulla optio ullam ut voluptatem voluptatibus. Alias,
            quo?
        </div>
        <div>At cumque, delectus doloremque, harum iure maiores obcaecati, quia quisquam rerum suscipit veritatis
            voluptate! Neque praesentium, quaerat? Ad alias corporis cum ducimus est magnam minus odit, quisquam
            reprehenderit, tempora veritatis!
        </div>
        <div>A accusamus deleniti dignissimos ea enim eos eveniet exercitationem facilis fuga ipsam laudantium minus
            modi nisi qui quia quibusdam sequi, vero. Ab consequatur cupiditate enim impedit odio! Eveniet, in
            reiciendis!
        </div>
        <div>Accusamus aliquid aperiam consequuntur dicta dolore fugiat illum, in ipsa ipsum, minus nemo numquam
            pariatur quo ratione reiciendis rem sapiente? Asperiores esse magnam nam nemo nisi non sunt tenetur
            voluptas?
        </div>
        <div>Ab architecto ea error facilis hic nemo quidem reprehenderit. Autem illo nam necessitatibus odio
            voluptatum. Animi deleniti quia reiciendis tenetur. Et fugiat minus neque nesciunt quaerat quidem tempore
            voluptates voluptatibus.
        </div>
    </div>
</body>
</html>